<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 750px;
				height: 500px;
				margin: 0 auto;
			}
			
			.border-t-a {
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<hr class="border-t-a">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px" >
				<el-form-item label="主题：" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				
				<el-form-item label="对应客户：" prop="custname" >
					<el-col :span="12" >
						<el-form-item  >
						<el-input v-model="form.custname" disabled></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="联系人：" prop="linId" >
						<el-select v-model="form.linName" @change="handleSelect1">
							<el-option v-for="item in customertoman" :key="item.linId" :label="item.linName" :value="item.linId">
						</el-select>
						<el-form-item  >
					</el-col>
				</el-form-item>
				
				<el-form-item>
					<el-col :span="8">
					<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="请输入客户名字" :trigger-on-focus="false" @select="handleSelect">
							<template slot-scope="{ item }">
								<div class="name">{{ item.cus_name }}({{ item.cus_company }})</div>
							</template>
						</el-autocomplete>
					</el-col>
					<el-col class="line" :span="3" :offset="4">执行人：</el-col>
					<el-col :span="8">
						${username}
					</el-col>
				</el-form-item>
				
				<el-form-item label="接单日期：">
					<el-col :span="8">
						<el-form-item prop="date1">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions1" ></el-date-picker> 
						</el-form-item>
					</el-col>
					<el-col class="line" :span="3" :offset="4">花费时间：</el-col>
					<el-col :span="8">
							<el-select v-model="form.spendtime">
							<el-option label="1个小时" :value="1.0"></el-option>
							<el-option label="2个小时" :value="2.0"></el-option>
							<el-option label="3个小时" :value="3.0"></el-option>
							<el-option label="半个工作日" :value="12.0"></el-option>
							<el-option label="1个工作日" :value="24.0"></el-option>
							<el-option label="2个工作日" :value="48.0"></el-option>
							<el-option label="3个工作日以上" :value="49.0"></el-option>
						</el-select>
					</el-col>
				</el-form-item>

				<el-form-item label="服务类型:" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio :label="406">答疑</el-radio>
						<el-radio :label="407">故障排序</el-radio>
						<el-radio :label="408">升级</el-radio>
						<el-radio :label="409">其他</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="服务方式:" prop="mode">
					<el-radio-group v-model="form.mode">
						<el-radio :label="410">传真</el-radio>
						<el-radio :label="411">电话</el-radio>
						<el-radio :label="412">上门</el-radio>
						<el-radio :label="413">邮寄</el-radio>
						<el-radio :label="414">其他</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态:" prop="state">
					<el-radio-group v-model="form.state">
						<el-radio :label="415">无需处理</el-radio>
						<el-radio :label="416">未处理</el-radio>
						<el-radio :label="417">处理中</el-radio>
						<el-radio :label="418">处理完成</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="服务内容：" prop="content">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="form.content"></el-input>
				</el-form-item>
				<el-form-item label="客户反馈：">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="form.back"></el-input>
				</el-form-item>
				<el-form-item>
					<el-col :span="8"></el-col>
							<el-col :span="8">
								<el-button @click="resetForm('form')">重置</el-button>
								<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
							</el-col>
							<el-col :span="8"></el-col>
				</el-form-item>

			</el-form>
		</div>

<script>
			var vms = new Vue({
				el: "#app",
				data() {
					return {
						customertoman: [],
						pickerOptions1: {//时间做约束
        					 disabledDate(time) {
            					return time.getTime() > Date.now() - 8.64e6;
        					 }
        				},
						form: {
							name: '',
							custname: '',
							custid: '',
							type: '',
							mode: '',
							date1: '',
							date2: '',
							spendtime: '',
							linId: '',
							linName: '',
							state: '',
							user: '',
							content: '',
							back: '',
							id: '',
							restaurants: []
						},
						//验证规则
						rules: { //数据源model
							name: [{
								required: true,
								message: '请输入服务主题',
								trigger: 'blur'
							}, ],
							custname: [{
								required: true,
								message: '请选择客户',
								trigger: 'blur'
							}],
							state: [{
								required: true,
								message: '请选择目前状态',
								trigger: 'blur'
							}],
							linId: [{
								required: true,
								message: '请选择联系人',
								trigger: 'blur'
							}],
							date1: [{
								//type: 'date',
								required: true,
								message: '请选择时间',
								trigger: 'blur'
							}],
							date2: [{
								//type: 'date',
								required: true,
								message: '请选择时间',
								trigger: 'blur'
							}],
							user: [{
								required: true,
								message: '请选择执行人',
								trigger: 'blur'
							}],
							type: [{
								required: true,
								message: '请选择服务类型',
								trigger: 'blur'
							}],
							mode: [{
								required: true,
								message: '请选择服务方式',
								trigger: 'blur'
							}],
							content: [{
								required: true,
								message: '请输入服务的内容',
								trigger: 'blur'
							}]
						}
					}
				},

				methods: {
					//queryString实时的文本框的值,cb回调函数
					querySearch: function(queryString, cb) {
						var allarr = this.form.restaurants;
						// console.info(allarr);

						var newsarr = [];
						allarr.forEach(v => {
							var strs = v.cus_name + "";
							if(strs.indexOf(queryString) >= 0) {
								newsarr.push(v);
								console.info(strs);
								console.info(v);
							}
						})
						// 调用 callback 返回建议列表的数据
						cb(newsarr);
					},
					submitForm(formName) {
						
						var iossn = this;
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								var par = null;
								if(JSON.stringify(${
										service
									}) === '{}') {
									par = "/serviceform";
								} else {
									par = "/editerserviceform";
									this.form.id = ${
										service.ser_id
									} + "";
								}

								//post提交数据
								axios.post(par,
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
										if(v.data == true){
										window.parent.location.href = "/getServicety";
									}else{
										window.parent.parent.location.href = "/getErrorty";
									}

								}).catch(function(e) {
									alert("出错了" + e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					handleSelect: function(it) {
						console.log(it.cus_name);
						this.form.custname = it.cus_name;
						this.form.custid = it.cus_id;
						var iosnn = this;

						//post提交数据
						axios.post("/onSale/findByCoustomerName",
							//参数转换
							Qs.stringify({
								'custid': this.form.custid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							iosnn.customertoman = v.data.custo;
							console.info(v.data);
						}).catch(function(e) {
							alert("出错了" + e);
						});

					},
					handleSelect1: function(it) {
						//	alert("ss");
						this.form.linId = it;
						console.log("我在选择联系人");
						console.log(this.form.linId);
					}
				},
				mounted() {
					var dic = ${
						dictionaryitem
					};
					//console.log(dic); 
					var mas = ${
						mansitem
					};
					this.form.restaurants = mas;
					//console.log(this.form.restaurants); 
					var news = ${
						service
					};
					console.log(news);
					if(news) {
						this.form.name = news.ser_name;
						this.form.custname = news.cus_name;
						this.form.custid = news.cus_id;
						this.form.type = news.ser_type;
						this.form.mode = news.ser_mode;
						this.form.spendtime = news.ser_spendtime;
						this.form.linId = news.link_id;
						this.form.linName = news.lin_name;
						this.form.user = news.user_id;
						this.form.state = news.ser_state;
						this.form.content = news.ser_content;
						this.form.back = news.ser_feednack;
						this.form.more = news.ser_remark;
						this.form.date1 = news.finishtime;
						
					}
				}
			});
		</script>
	</body>

</html>